<!doctype html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>orderlines</title>
    <style>
        body {
            margin: 20px 50px;

            /* 增加左右页边距 */
            font-family: Arial, sans-serif;
            background-color: #f2f9ff;

            /* 设置整体色调为蓝色 */
        }

        header {
            text-align: center;
        }

        .task-info {
            width: 80%;
            margin: 10px;
            border: 1px solid #dddddd;
            border-radius: 5px;
        }

        .task-infos {
            position: fixed;
            width: 80%;
            height: 65%;
            margin-bottom: 10px;
            overflow: auto;
            border: 1px solid #dddddd;
            border-radius: 5px;
        }

        .task-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 25px;
            padding: 5px;
            cursor: pointer;
            border-bottom: 1px solid #dddddd;
            border-radius: 5px 5px 0 0;
        }

        .task-header-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .task-body {
            display: none;
            padding: 10px;
            margin-left: 20px;
        }

        .test-case {
            padding: 10px;
            margin: 10px;
        }

        .success {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: green;
        }

        .failure {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: red;
        }

        .stop {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: #c9c903;
        }

        .timeout {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: orange;
        }

        .paused {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: purple;
        }

        .pending {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: grey;
        }

        .running {
            width: 200px;
            font-size: 15px;
            font-weight: 600;
            color: #0084ff;
        }

        .pass {
            color: green;
        }

        .fail {
            color: red;
        }

        table {
            align-items: center;
            width: 70%;
            border-collapse: collapse;
            border: 1px solid #dddddd;
        }

        th,
        td {
            padding: 8px;
            text-align: center;
            border: 1px solid #dddddd;
        }

        th {
            background-color: #f2f2f2;
        }

        .watermark {
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: -1;
            opacity: 0.1;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        .task_name {
            font-size: 15px;
            font-weight: 600;
            color: #6fa0e3;
        }

        .elapsed {
            font-size: 12px;
            font-weight: 600;
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            display: none;
            width: 100%;
            height: 100%;
            background-color: rgb(0 0 0 / 80%);
        }

        .modal-image {
            display: block;
            max-width: 90%;
            max-height: 90%;
            margin: auto;
            margin-top: 5%;
        }

        .dialog {
            width: 300px;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
        }

        .dialog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 5px;
            margin-bottom: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #333333;
            cursor: pointer;
            background: none;
            border: none;
            border-bottom: 3px solid #dddddd;
            border-radius: 5px 5px 0 0;
        }

        .close-btn {
            padding: 5px 10px;
            font-size: 14px;
            font-weight: normal;
            color: white;
            cursor: pointer;
            background-color: #b40e0e;
            border: none;
            border-bottom: 1px solid #ffffff;
            border-radius: 5px;
        }

        .close-btn:hover {
            background-color: #b42e0e;
        }

        .dialog-content {
            height: 700px;
            font-size: 14px;
            color: #333333;
            border-bottom: 1px solid #dddddd;
            border-radius: 5px 5px 0 0;
        }

        pre {
            max-height: 200px; /* Limit max height to prevent overflowing */
            padding: 5px;
            margin: 0;
            overflow-x: auto; /* Enable horizontal scrolling if needed */
            font-size: 15px;
            background-color: #f8f8f8;
            border: 1px solid #dddddd;
            border-radius: 5px;
        }

        .task-item {
            width: 100px;
            padding: 5px;
            margin: 0 5px;
            font-size: 15px;
            font-weight: bold;
        }

        #show-dialog-btn {
            padding: 5px 10px;
            font-size: 14px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            background-color: #0084ff; /* 与运行中的任务颜色相似，可按需调整 */
            border: none;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
        }

        #show-dialog-btn:hover {
            background-color: #0069d9; /* 鼠标悬停时的颜色变化 */
        }

        /* Dialog 样式调整 */
        #details-dialog {
            width: 600px;
            height: 800px;
            border-radius: 5px;
        }

        /* 可选：为Dialog标题添加一些样式 */
        #details-dialog::backdrop {
            background-color: rgb(0 0 0 / 30%); /* 背景半透明效果 */
        }

        #details-dialog dialog-header {
            padding: 10px;
            font-weight: bold;
            background-color: #f8f8f8;
            border-bottom: 1px solid #dddddd;
        }

    </style>

    <script type="text/javascript" src="../static/template.js"></script>
</head>
<body>
<header>
    <h1>Test Report</h1>
    <button id="show-dialog-btn" style="position: absolute; top: 50px; right: 20px">Process Details</button>
</header>
{% include 'process.html' %}
<h3>Task Running Log:</h3>
<div class="task-infos">
    {% for task in task_instance_info %}
    {% include 'task_details.html' %}
    {% endfor %}
</div>
<div class="watermark">orderlines</div>

<div id="modal" class="modal" onclick="hideModal()">
    <img id="modal-image" class="modal-image"/>
</div>

</body>
<script>
    let now = new Date();
    let datetime = now.toLocaleString();
    document.write('<div style="position: fixed; top: 20px; right: 20px;">' + datetime + "</div>");

    function showModal(image) {
        let modal = document.getElementById("modal");
        let modalImage = document.getElementById("modal-image");
        modal.style.display = "block";
        modalImage.src = image.src;
    }

    function hideModal() {
        let modal = document.getElementById("modal");
        modal.style.display = "none";
    }

    document.getElementById("show-dialog-btn").addEventListener("click", function () {
        let dialog = document.getElementById("details-dialog");
        dialog.showModal(); // 使用showModal方法显示dialog
    });

    function closeDialog() {
        let dialog = document.getElementById("details-dialog");
        dialog.close();
    }

    function toggleTask(taskId, plusMinusId) {
        let taskBody = document.getElementById(taskId);
        let plusMinus = document.getElementById(plusMinusId);

        // 添加调试信息
        console.log("Toggling task with ID:", taskId);
        console.log("Current display state:", taskBody.style.display);

        taskBody.style.display = taskBody.style.display === "none" ? "block" : "none";
        plusMinus.innerHTML = taskBody.style.display === "none" ? "+" : "-";

        // 再次记录状态，确认是否切换成功
        console.log("New display state:", taskBody.style.display);
    }

</script>
</html>
